import { Form, Input, Checkbox, Button, Row, Col } from 'antd'
import '../index.less'

export default function IndexPage() {

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  function onFinish(values: any) {
    console.log(values);
    window.fetch("/api/project", {
      body: JSON.stringify(values), method: "post", headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
    });
  }

  return (
    <div style={{ margin: "0 auto", paddingTop: 60, width: 500, textAlign: 'center' }}>
      <Row>
        <Col span={16} push={8}>
          <h1 style={{ marginBottom: 60 }}>添加项目</h1>
        </Col>
      </Row>
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        style={{ textAlign: 'left' }}
      >
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="code"
          name="code"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" block>
            保存
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
